import { useCounterStore } from "@/stores/zustand/CounterStore";
import LikeCounter from "@/components/LikeCounter";
import {
  /*useTodosStore, */ useTodosStoreActions,
  useFilter,
  useTodosStoreComputed,
} from "@/stores/zustand/TodosStore";
import Todos from "@/components/Todos";
function ZustandPage() {
  const { count, increment, decrement } = useCounterStore();

  // const {
  // filter,
  // addTodo,
  // toggleTodo,
  // removeTodo,
  // setFilter,
  // clearCompleted,
  // getFilteredTodos,
  // getActiveTodoCount,
  // } = useTodosStore();

  const filter = useFilter();

  const { addTodo, toggleTodo, removeTodo, setFilter, clearCompleted } =
    useTodosStoreActions();

  const { getFilteredTodos, getActiveTodoCount } = useTodosStoreComputed();
  return (
    <div className="flex flex-col w-1/2 mx-auto">
      <div className="p-4 mt-4 bg-amber-100 rounded-2xl">
        <h3 className="mb-2">
          Zustand 使用 单例 Store 模式，Store
          在模块级别创建，所有组件都直接导入和使用这个 Store 实例
        </h3>
        <h3 className="mb-2">Zustand 可以不使用 context provider 来包裹</h3>
      </div>
      <div className="p-4 mt-4 bg-amber-100 rounded-2xl">
        <h3 className="mb-2">计数器</h3>
        <LikeCounter
          likeCount={count}
          incrementCount={increment}
          decrementCount={decrement}
        />
      </div>
      <div className="p-4 mt-4 bg-amber-100 rounded-2xl">
        <Todos
          filter={filter}
          filteredTodos={getFilteredTodos()}
          activeTodoCount={getActiveTodoCount()}
          addTodo={addTodo}
          toggleTodo={toggleTodo}
          removeTodo={removeTodo}
          setFilter={setFilter}
          clearCompleted={clearCompleted}
        />
      </div>
    </div>
  );
}

export default ZustandPage;
